<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-message-box</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>MessageBox 弹框</h2>
				<p>模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>消息提示</h3>
					<p>当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。</p>
				</div>
				<div class="content message-box">
					<qx-button>点击打开 Message Box</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>确认消息</h3>
					<p>提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。</p>
				</div>
				<div class="content confirm-box">
					<qx-button>点击打开 confirm Box</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>自定义内容</h3>
					<p>可自定义配置不同内容。</p>
				</div>
				<div class="content custom-box">
					<qx-button>点击打开 Custom Box</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>提交内容</h3>
					<p>当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。</p>
				</div>
				<div class="content submit-box">
					<qx-button>点击打开 Submit Box</qx-button>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Message-box Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>title</td>
						<td>MessageBox 标题</td>
						<td>string</td>
						<td>—</td>
						<td>提示</td>
					</tr>
					<tr>
						<td>message</td>
						<td>MessageBox 消息正文内容</td>
						<td>string / VNode</td>
						<td>—</td>
						<td>这是一段内容</td>
					</tr>
					<tr>
						<td>type</td>
						<td>消息类型，用于显示图标</td>
						<td>string</td>
						<td>success / info / warning / error</td>
						<td>—</td>
					</tr>
					<tr>
						<td>showInput</td>
						<td>是否显示输入框</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>placeholder</td>
						<td>输入框的占位符</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>type</td>
						<td>输入框的类型</td>
						<td>string</td>
						<td>—</td>
						<td>text</td>
					</tr>
					<tr>
						<td>value</td>
						<td>输入框的初始文本</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>maxLength</td>
						<td>输入框的最大值</td>
						<td>number</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>showCancelBtn</td>
						<td>是否显示取消按钮</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>showConfirmBtn</td>
						<td>是否显示确定按钮</td>
						<td>boolean</td>
						<td>—</td>
						<td>true</td>
					</tr>
					<tr>
						<td>cancelBtnText</td>
						<td>取消按钮的文本内容</td>
						<td>string</td>
						<td>—</td>
						<td>取消</td>
					</tr>
					<tr>
						<td>confirmBtnText</td>
						<td>确定按钮的文本内容</td>
						<td>string</td>
						<td>—</td>
						<td>确定</td>
					</tr>
				</tbody>
			</table>
			<h2>Message-box Events</h2>
			<table>
				<thead>
					<tr>
						<th>事件名称</th>
						<th>说明</th>
						<th>回调参数</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>confirm</td>
						<td>点击确认时触发的事件</td>
						<td>—</td>
					</tr>
					<tr>
						<td>cancel</td>
						<td>点击取消时触发的事件</td>
						<td>—</td>
					</tr>
					<tr>
						<td>close</td>
						<td>点击关闭时触发的事件</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			$(function () {
				$('.message-box button').on('click', function () {
					$(this).messageBox({
						message: '我是主要内容~~',
						confirm: function () {
							console.log('confirm')
						},
						cancel: function () {
							console.log('cancel')
						},
						close: function () {
							console.log('close')
						}
					})
				})

				$('.confirm-box button').on('click', function () {
					$(this).messageBox({
						type: 'warning',
						showCancelBtn: true,
						message: '此操作将永久删除该文件, 是否继续?',
						confirm: function () {
							console.log('confirm')
						},
						cancel: function () {
							console.log('cancel')
						},
						close: function () {
							console.log('close')
						}
					})
				})

				$('.custom-box button').on('click', function () {
					$(this).messageBox({
						type: 'success',
						message: '<p style="color: #67c23a; font-size: 16px;">恭喜您，更新成功</p>',
						confirm: function () {
							console.log('confirm')
						},
						cancel: function () {
							console.log('cancel')
						},
						close: function () {
							console.log('close')
						}
					})
				})

				$('.submit-box button').on('click', function () {
					$(this).messageBox({
						value: 'qq@qq.com',
						showInput: true,
						showCancelBtn: true,
						message: '这是我的邮箱，请惠存！',
						placeholder: '请输入邮箱',
						type: 'email',
						maxLength: 18,
						confirm: function () {
							console.log('confirm')
						},
						cancel: function () {
							console.log('cancel')
						},
						close: function () {
							console.log('close')
						}
					})
				})
			})
		</script>
	</body>
</html>
